<template>
  <div class="selector" @click="hideModal">
    <!--            状态管理            -->
    <div class="se-status">
      <div class="se-nav">
        <ul>
          <li class="se-navitem" v-for="item of parents" :data-status="item.status" @click.capture="showChildren">
            {{ item.title }} <i
            class="iconfont icon-xiala" :data-status="item.status"></i></li>
        </ul>
      </div>
      <div class="se-body" :class="{ 'modal-active': showModal }">
        <ul>
          <!--        子状态项        -->
          <li class="se-cell" v-for="item of children" @click="getData(item)">
            {{ item.title }}
            <i class="iconfont icon-zhengque iconsize" v-if="item.status === childrenStatus"></i>
          </li>
        </ul>
      </div>
    </div>

    <div class="modal" :class="{ 'active': showModal }"></div>
  </div>
</template>
<script>
  import '../assets/iconfont/iconfont.css'

  export default {
    name: 'Selector',
    props: {
      // 子状态集合
      children: {
        type: Array,
        value: [],
      },
      // 父状态集合
      parents: {
        type: Array,
        value: [],
        required: true
      },
      // 是否多状态联合查询
      union: {
        type: Boolean,
        value: false
      }
    },
    data() {
      return {
        // 当前子状态
        childrenStatus: "",
        // 当前父状态
        parentStatus: "",
        // 当前状态集合 { 父状态 => 子状态 }
        status: [],
        // 当前modal状态
        showModal: false
      }
    },
    methods: {
      /**
       * 显示modal
       * @param target
       */
      showChildren({target}) {
        console.log(target.dataset.status);
        if (typeof target.dataset.status === 'undefined') {
          return;
        }
        this.showModal = !this.showModal;
        this.parentStatus = target.dataset.status;
        // 触发事件
        this.$emit('tap-parent', this.parentStatus);
      },
      /**
       * 隐藏modal
       * @param target
       */
      hideModal({target}) {
        if (typeof target.dataset.status === 'undefined') {
          this.showModal = false
        }
      },
      /**
       * 点击子状态事件
       */
      getData(children) {
        if (!this.union) {
          // 触发事件
          this.$emit('tap-children', this.childrenStatus);
          return;
        }
        // 设置当前子状态
        this.childrenStatus = children.status;
        let parentIndex = this.parents.findIndex(item => item.status === this.parentStatus);
        console.log(parentIndex);
        this.$set(this.parents, parentIndex, {title: children.title, status: this.parentStatus});
        // 如果状态集合为空
        if (this.status.length === 0) {
          // 则添加当前父状态对应的子状态
          this.status.push({[this.parentStatus]: this.childrenStatus});
        } else {
          for (let item of this.status) {
            for (let key in item) {
              if (key === this.parentStatus) {
                item[key] = this.childrenStatus;
                // 触发事件
                this.$emit('tap-children', this.status);
                return;
              }
            }
          }
          this.status.push({[this.parentStatus]: this.childrenStatus});
        }
        console.log("status", this.status);
        // 触发事件
        this.$emit('tap-children', this.status);
      }
    },
    mounted() {

    }
  }
</script>
<style lang="scss">
  * {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  @mixin iconsize($color: #666, $fontsize: .6rem) {
    font-size: $fontsize;
    color: $color;
  }

  @mixin flex($just-content: center, $align-items: center) {
    display: flex;
    justify-content: $just-content;
    align-items: $align-items;
    flex-flow: row nowrap;
  }

  .selector {
    .se-status {
      position: relative;
      z-index: 120;

      .se-nav {
        box-shadow: 0 .2rem .3rem #e5e5e5;
        background: #fff;

        ul {
          @include flex(start);

          li {
            padding: 1rem;
            text-align: center;
            line-height: 1.5rem;
          }
        }
      }

      .se-body {
        max-height: 0;
        overflow: hidden;
        background: #fff;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -ms-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
        &.modal-active {
          max-height: 100vh;
        }

        ul li {
          padding: .8rem 1rem;
          font-size: 1rem;
          @include flex(space-between);

          .iconfont {
            @include iconsize(#0099ff);
          }
        }
      }
    }

    .modal {
      position: fixed;
      z-index: -1;
      background: #222;
      opacity: 0;
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;

      &.active {
        opacity: .5;
        z-index: 99;
      }
    }
  }

</style>
